<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
    <link href="/SignIn_Register_war_exploded/zc.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $('input[name="uname"]').keyup(function () {
                var xx;
                var iu = $('input[name="uname"]');
                var li = $('label[for="inputUserame"]');
                $.ajax({
                    url: "Uname",
                    type: "post",
                    async: true,
                    data: {uname: iu.val()},
                    success: function (data) {
                        if (data == "false") {
                            li.text("用户名");
                            li.attr("class", "");
                            $("#register").attr("disabled", false);
                        } else {
                            xx = data;
                            li.text("用户名重复");
                            li.attr("class", "text-danger");
                            $("#register").attr("disabled", true);
                        }
                    }
                });
            });

        });

        function yz() {
            var yz;
            var iu = $('input[name="uname"]');
            var li = $('label[for="inputUserame"]');
            $.ajax({
                url: "Uname",
                type: "post",
                async: false,
                data: {uname: iu.val()},
                success: function (data) {
                    if (data == "false") {
                        li.text("用户名");
                        li.attr("class", "");
                        $("#register").attr("disabled", false);
                    } else {
                        yz = data;
                        li.text("用户名重复");
                        li.attr("class", "text-danger");
                        $("#register").attr("disabled", true);
                    }
                }
            });
            if (yz == "true") {
                return false;
            }
            alert("注册成功!请登陆");
            return true;
        }

        function yanZheng() {
            var upwd = $('input[name="upwd"]');
            var opwd = $('input[name="opwd"]');
            var label = $('label[for="inputConfirmPassword"]');
            if (trim(upwd.val()) == trim(opwd.val())) {
                $("#register").attr("disabled", false);
                label.text("确认密码");
                label.attr("class", "");
                return true;
            } else {
                $("#register").attr("disabled", true);

                label.text("两次密码不一致")
                label.attr("class", "text-danger");
                return false;
            }
        }

        //去掉前后空格
        function trim(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }
    </script>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-lg-10 col-xl-9 mx-auto">
            <div class="card card-signin flex-row my-5">
                <div class="card-img-left d-none d-md-flex">
                    <!-- Background image for card set in CSS! -->
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">注册</h5>
                    <form class="form-signin" action="" onsubmit="return yz()" method="post">
                        <div class="form-label-group">
                            <label for="inputUserame">用户名</label>
                            <input type="text" id="inputUserame" class="form-control" placeholder="Username" required
                                   name="uname"
                                   autofocus>
                        </div>

                        <div class="form-label-group">
                            <label for="inputEmail">邮箱</label>
                            <input type="email" id="inputEmail" class="form-control" placeholder="Email address"
                                   name="email"
                                   required>
                        </div>

                        <div class="form-label-group">
                            <label for="inputPassword">密码</label>
                            <input type="password" id="inputPassword" class="form-control" placeholder="Password"
                                   name="upwd"
                                   required>
                        </div>
                        <div class="form-label-group">
                            <label for="inputConfirmPassword">确认密码</label>
                            <input type="password" id="inputConfirmPassword" class="form-control" placeholder="Password"
                                   onkeyup="yanZheng()"
                                   name="opwd" required>
                        </div>
                        <span name="tisi" class="text-danger"></span>
                        <hr>
                        <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit" id="register">注册
                        </button>

<!--                        <a class="btn btn-danger btn-block text-white" href="/SignIn_Register_war_exploded/SignIn.html">登陆</a>-->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>